<template>
	<view class="content">
		<canvas class="canvas-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" style="width: 700rpx;height: 700rpx;" canvas-id="boardCanvas"></canvas>
		<view class="btn-group">
			<!-- <button size="mini" type="primary" @click="rescind">撤销</button> -->
			<button size="mini" type="primary" @click="setColor">设置线条颜色（随机）</button>
			<button size="mini" type="warn" @click="clear">清空</button>
		</view>
		<view class="tit">设置线条粗细</view>
		<slider value="1" min="1" max="10" @change="sliderChange" step="1" :show-value="true" />
	</view>
</template>

<script>
	export default {
		data(){
			return{
				ctx:null,
				points:[],		// 绘制时的每一个点的坐标
				imageData:[],	// 每次落笔保存之前的像素数据
			}
		},
		mounted() {
			this.init()
		},
		methods:{
			init(){
				let ctx = uni.createCanvasContext('boardCanvas')
				ctx.setLineCap('round')		// 设置线条的端点样式
				ctx.setLineJoin('round')	// 设置线条的交点样式
				this.ctx = ctx
			},
			// 开始
			touchstart(e){
				let startPoint = {X:e.changedTouches[0].x,Y:e.changedTouches[0].y}
				this.points.push(startPoint)
				this.ctx.beginPath()		// 开启新路径
				
				uni.canvasGetImageData({
					canvasId:'boardCanvas',
					x: 0,
					y: 0,
					width: uni.upx2px(700),
					height: uni.upx2px(700),
					success:res => {
						let data = new Uint8ClampedArray(res.data)
						this.imageData.push(res.data);
					}
				});
			},
			// 移动
			touchmove(e){
				if(e.changedTouches[0].x < 350 && e.changedTouches[0].y < 350){
					let moveX = e.changedTouches[0].x;
					let moveY = e.changedTouches[0].y;
					let movePoint = {X:moveX,Y:moveY};
					this.points.push(movePoint);       // 存点
					let len = this.points.length;
					if(len >= 2){
						this.draw();                   // 绘制路径
					}
					// this.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y)
					// this.ctx.stroke();
					// this.ctx.draw(true);
				}
			},
			// 结束
			touchend(){
				// this.ctx.closePath()
				this.points=[];
			},
			draw(){
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.ctx.moveTo(point1.X, point1.Y)
				this.ctx.lineTo(point2.X, point2.Y)
				this.ctx.closePath()
				this.ctx.stroke()
				this.ctx.draw(true)
			},
			
			// 撤销 
			rescind(){
				const data = new Uint8ClampedArray([255, 0, 0, 255, 0, 0, 0, 0, 0, 0, 0, 0, 255, 255, 0, 211, 255, 255, 0, 255])
				uni.canvasPutImageData({
					canvasId: 'boardCanvas',
					x: 0,
					y: 0,
					width: 1,
					data: data,
					success:res => {
						console.log(res)
					}
				},this)
				return
				
				if (this.imageData.length > 0) {
					console.log(this.imageData)
					const data = new Uint8ClampedArray([255, 0, 0, 255])
					uni.canvasPutImageData({
						canvasId: 'boardCanvas',
						x: 0,
						y: 0,
						width: uni.upx2px(750),
						data,
						success(res) {
							console.log(res)
						}
					})
				}else{
					alert('没有了')
				}
			},
			// 清空
			clear(){
				this.ctx.clearRect(0, 0, uni.upx2px(750), uni.upx2px(750))
				this.ctx.draw()
			},
			// 设置线条粗细
			sliderChange(e){
				this.ctx.setLineWidth(e.detail.value)
			},
			// 设置线条颜色
			setColor(){
				let randomColor = Math.floor(Math.random()*16777215).toString(16);
				this.ctx.setStrokeStyle(`#${randomColor}`)
				uni.showToast({
					title: `已生成颜色 #${randomColor}`,
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{padding-top: 40rpx;
		.canvas-box{margin: 0 auto;border: 1px solid #eee;box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .2);}
		.btn-group{display: flex;padding: 0 25rpx;justify-content: space-around;margin-top: 20rpx;}
		.tit{padding: 0 25rpx;color: #666;font-size: 32rpx;margin-top: 10rpx;;}
	}
</style>
